<template>
  <div style="position: relative">
     <div v-if="handleType == 'look'" class="mask"></div>
    <a-form
      ref="formRef"
      layout="vertical"
      :model="formState"
      :rules="rules"
      :wrapper-col="wrapperCol"
      style="display: flex; flex-wrap: wrap"
    >
      <a-form-item style="width: 50%" ref="name" label="角色名称" name="name">
        <a-input v-model:value="formState.name" placeholder="请输入角色名称" />
      </a-form-item>
      
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="code"
        label="角色编码"
        name="code"
      >
        <a-input
          v-model:value="formState.code"
          placeholder="请输入角色编码"
        />
      </a-form-item>
       <a-form-item
        style="width: 100%"
        ref="remark"
        label="角色描述"
        name="remark"
      >
        <a-textarea
          v-model:value="formState.remark"
          placeholder="请输入角色描述"
        />
      </a-form-item>
      <a-form-item
        style="width: 100%"
        label="状态"
      >
        <a-select
            allowClear
            style="width: 100%"
            v-model:value="formState.isFreeze"
            placeholder="请选择状态"
          >
            <a-select-option
              v-for="item in options"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
      </a-form-item>
      
    
    </a-form>

   
  </div>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRaw,
  toRef,
  toRefs,
  watch,
} from "vue";
import * as settingApi from "@/api/setting1";
import { message } from "ant-design-vue";
let options = [
        //状态
        {
          label: "正常",
          value: 0,
        },
        {
          label: "禁用",
          value: 1,
        },
      ]

const rules = {
  name: [
    {
      required: true,
       message: "请输入角色名称",
      trigger: "blur",
    },
  ],
  
  code: [
    {
      required: true,
      message: "请输入角色编码",
      trigger: "blur",
    },
  ],
  remark:[{
    required: true,
      message: "请输入角色描述",
      trigger: "blur",
  }],
 
};

export default defineComponent({
  props: {
    handleType: {
      type: String,
      default: "add",
    },
    handleRow: {
      type: Object,
      default: {},
    },
  },
  setup(props, { emit }) {
    const handleType = toRef(props, "handleType");
    const formRef = ref();
    const formState = reactive({
      name: "", //角色名称
      code: "", //角色编码,
      remark:'',
      isFreeze:0,
      id:''
    });
    
    // 保存数据
    const handleSave = () => {
      if (props.handleType == "look") {
        resetForm();
        emit("finish");
        return false;
      }
      formRef.value.validate().then(() => {
        let params = {
          ...toRaw(formState),
        };
         settingApi
            .roleSaveOrUpdate(params).then((res) => {
          if (res && res.success) {
            message.success("操作成功");
            resetForm();
            emit("finish");
          } else {
          }
        });
      });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    onMounted(async () => {
      if (props.handleType == "add") {
        formState.id = ''
        return false;
      }
      formState.name = props.handleRow.name
      formState.code = props.handleRow.code
       formState.remark = props.handleRow.remark
       formState.isFreeze = props.handleRow.isFreeze
      formState.id = props.handleRow.id
     
    });

   
    return {
      options,
      formRef,
      handleType,
      wrapperCol: {
        span: 0,
      },
      formState,
      rules,
      handleSave,
      resetForm,

      
    };
  },
});
</script>
<style lang="scss" scoped>
.mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100%;
  height: 100%;
}
</style>